<template>
  <div id="theme">
    <input type="color" v-model="themeColor" />

    <div class="container"></div>
  </div>
</template>
<script>
import less from "less";
export default {
  name: "test",
  components: {},
  data() {
    return {
      themeColor: ""
    };
  },
  created() {
    less.modifyVars({
      env: "development",
      "@themeColor": "#ff0000"
    });
    less.watch();
  },
  watch: {
    themeColor: {
      handler: function() {
        console.log("this.themeColor", this.themeColor);
        const colors = less.modifyVars({
          "@themeColor": this.themeColor
        });
        colors.then(res=>{
            console.log('res', res);
        })
        console.log('colors', colors);
      },
      immediate: true
    }
  }
};
</script>
<style scoped lang='less'>
@themeColor: #ff0000;

.container {
  width: 50px;
  height: 50px;
  background: @themeColor;
}
</style>